<template>
	<view>
		<z-nav-bar title="比赛设置"></z-nav-bar>
		<view class="time">
			<view>开始时间</view>
			<view class="right">
				<uni-datetime-picker type="datetime" v-model="date" />
			</view>
		</view>
		<view class="num">
			<text>同组人数</text>
			<view class="input">
				<image :src="`${setting.sImgUrl}/dec.png`" v-if="num == 1"></image>
				<image :src="`${setting.sImgUrl}/decs.png`" @click="dec()" v-else></image>
				<input type="number" v-model="num" />
				<image :src="`${setting.sImgUrl}/inc.png`" @click="inc()"></image>
			</view>
		</view>
		<view class="row" v-for="(v, k) in user">
			<view class="left">{{ k + 1 }}号</view>
			<input type="text" placeholder="输入昵称" placeholder-class="placeholer" :value="v" @input="setUser" :data-k="k" maxlength="5" />
		</view>
		<view class="row">
			<view class="left">球洞</view>
			<picker @change="bindPickerChange" :value="index" :range="array">
				<view class="right">
					<block v-if="hole">
						<text style="color: #333">{{ hole }}</text>
					</block>
					<block v-else>请选择</block>
					<image :src="`${setting.sImgUrl}/icon_drop-down.png`"></image>
				</view>
			</picker>
		</view>
		<view class="btn" @click="next()">
			<text>确认</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			date: '',
			num: 1,
			hole: '',
			array: ['18洞', '9洞'],
			user: [''],
			index: ''
		};
	},
	methods: {
		setUser(e) {
			this.user[e.target.dataset.k] = e.detail.value;
		},
		dec() {
			this.num--;
			this.user = [];
			for (let i = 0; i < this.num; i++) {
				this.user.push('');
			}
		},
		inc() {
			this.num++;
			this.user.push('');
		},
		bindPickerChange(e) {
			this.hole = this.array[e.detail.value];
		},
		next() {
			if (!this.date) return this.tools.alert('请选择时间')
			let is = -1;
			this.user.forEach((item, index) => {
				if (is >= 0) return
				if (!item) is = index;
			});
			if (is >= 0) return this.tools.alert(`请填写${is + 1}号昵称`)
			if (!this.hole) return this.tools.alert('请选择球洞')
			uni.setStorageSync('playData', { user: this.user, date: this.date, hole: this.hole });
			uni.navigateTo({
				url: '/pages/student/play/count'
			});
		}
	},
	onLoad() {
		let info = uni.getStorageSync('playData');
		if (info) {
			this.user = info.user;
			this.hole = info.hole;
			this.date = info.date;
		}
	}
};
</script>

<style>
@import './css/save.css';
</style>
